<template>
  <div style="    margin: -10px;" class="content">
    <el-tabs :tab-position="tabPosition">
      <!-- 头像未完结 -->
      <el-tab-pane style label="个人中心">
        <div class="personal_box">
          <div class="Personal">
            <img :src=" 'http://192.168.0.28:8082'+geren.avatar" alt />
            <el-form
              :disabled="true"
              :label-position="labelPosition"
              label-width="80px"
              :model="geren"
            >
              <el-form-item label="账号">
                <el-input v-model="geren.username"></el-input>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input v-model="geren.mobile"></el-input>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="geren.email"></el-input>
              </el-form-item>
              <el-form-item label="实名认证">
                <el-input v-model="geren.email"></el-input>
              </el-form-item>
            </el-form>
            <el-button @click="outs" type="danger" round>退出登录</el-button>
            <el-button type="info" round>注销账号</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="个人认证">
        <div class="personal_box">
          <div class="box_personal_content">
            <el-row :gutter="15">
              <el-form :disabled="true" :model="formData" size="medium" label-width="100px">
                <el-col :span="12">
                  <el-form-item label-width="140px" label="机构类型">
                    <el-input
                      v-model="formData.enterprise_nature"
                      placeholder="请输入机构类型"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="联系人">
                    <el-input
                      v-model="formData.corporate_information"
                      placeholder="请输入法人姓名"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="统一社会信用代码">
                    <el-input
                      v-model="formData.unify_social_credit_code"
                      placeholder="请输入法人姓名"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="公司名称">
                    <el-input
                      v-model="formData.company_name"
                      placeholder="请输入机构名称"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="联系方式">
                    <el-input
                      v-model="formData.corporate_phone"
                      placeholder="请输入法人联系方式"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="开户行">
                    <el-input
                      v-model="formData.account_bank"
                      placeholder="请输入证件类型"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="法人身份证号">
                    <el-input
                      v-model="formData.corporate_id_number"
                      placeholder="请输入法人身份证号"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="法人身份证照片">
                    <img :src="$baseUrl+formData.id_card_front" alt />
                    <img :src="$baseUrl+formData.id_card_reverse" alt />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="基本账号">
                    <el-input
                      v-model="formData.basic_account"
                      placeholder="请输入机构证件号"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="营业执照">
                    <img :src="$baseUrl+formData.business_license_pic" alt />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="联系地址">
                    <el-input
                      v-model="formData.contact_address"
                      placeholder="请输入详细地址"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="140px" label="账号名称">
                    <el-input
                      v-model="formData.account_name"
                      placeholder="请输入企业电话"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
        </div>
      </el-tab-pane>
      <!-- 修改密码 -->
      <el-tab-pane label="修改密码">
        <div class="update_password">
          <div class="update">
            <el-form :label-position="labelPosition1" label-width="100px" :inline="true" :model="modifylist" class="demo-form-inline">
              <el-row :gutter="10">
                <el-col :span="24">
                  <el-form-item label="原密码:">
                    <el-input v-model="modifylist.old_password" placeholder="请输入原密码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="新密码:">
                    <el-input v-model="modifylist.password" type="password" placeholder="请输入新密码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="确认新密码:">
                    <el-input v-model="password_again" type="password" placeholder="请再次输入新密码"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <el-button type="primary" @click="modifys">确认修改</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 企业业绩详情内容  完结-->
    <el-dialog :title="title" :visible.sync="open1" width="60%" append-to-body>
      <el-form :disabled="true" :model="form" label-width="130px">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="项目编号:">
              <el-input
                v-model="formData.bidding_number"
                placeholder="请输入项目编号:"
                show-word-limit
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="采购项目：" prop="bidding_project_name">
              <el-input
                v-model="formData.bidding_project_name"
                placeholder="请输入采购项目名称："
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="采购方式：" prop="procurement_method">
              <el-input
                v-model="formData.bidding_type"
                placeholder="请输入采购方式："
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="中标金额" prop="money">
              <el-input
                v-model="formData.margin_amount"
                placeholder="请输入预算金额："
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="包号：" prop="package_number">
              <el-input
                v-model="formData.bidding_project_number"
                placeholder="请输入包号："
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="公布日期：" prop="package_number">
              <el-input
                v-model="formData.bidder_notice_time"
                placeholder="请输入包号："
                clearable
                :style="{width: '100%'}"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="bottom">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label">采购需求</span>
            {{formData.content}}
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label">标段名称</span>
            {{formData.bidding_project_name}}
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
    <el-dialog
  title="提示"
  :visible.sync="zhengshudialog"
  width="30%"
  :before-close="handleClose">
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="证书名称">
    <el-input v-model="formInline.user" placeholder="证书名称"></el-input>
  </el-form-item>
  <!-- <el-form-item label="活动区域">
    <el-select v-model="formInline.region" placeholder="活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item> -->
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
   
  </el-form-item>
</el-form>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="zhengshudialog = false">取 消</el-button>
    <el-button type="primary" @click="zhengshudialog = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>
<script>
import {
  zizhi,
  yeji,
  seal,
  corporate,
  modify,
  grzx,
  out,
  kuaidi,
  gongsirenzheng
} from "@/api/personal";
export default {
  data() {
    return {
      labelPosition: "top",
      labelPosition1: "top",
      zhengshudialog:false,
      password_again:null,
        formInline: {
          user: '',
          region: ''
        },
      // 表单认证
 // 快递参数
      kuaidi_params: {
        limit: 10,
        offset: 0,
      },
      kuai_parms: {
        page_limit: "",
        page: "",
        kws: "",
        status: -1,
      },
      // 快递总条数
      kuaidi_total: null,
      baohan_total: null,
      // 快递列表
      kuaidilist: [],
      zizhilist: [],
      grzx: [],
      outlist: [],
      modifylist: {
        password: "",
        old_password: "",
        id: "",
        user_id: ""
      },
      form: {},
      title: "",
      open1: false,
      yeji_search: "",
      geren: {},
      corporatelist: [],
      seallist: [],
      yejilist: [],
      tabPosition: "left",
      search: "",
      formData: {},
      field132Action: "https://jsonplaceholder.typicode.com/posts/",
      field132fileList: [],
      field133Action: "https://jsonplaceholder.typicode.com/posts/",
      field133fileList: [],
      field135Action: "https://jsonplaceholder.typicode.com/posts/",
      field135fileList: [],
      field136Action: "https://jsonplaceholder.typicode.com/posts/",
      field136fileList: [],
      yeji_params: {
        limit: 10,
        offset: 0,
        keywords: "",
        // user_id: sessionStorage.getItem("user_id")
      },
      yeji_total: null
    };
  },
  created() {
    this.grzxs();
    // this.zizhis();
    this.yejis();
    this.seals();
    this.corporates();
    this.getKuaidi();
    this.gongsirenzheng();
  },
  methods: {
     onSubmit() {
        console.log('submit!');
      },
    //公司认证信息
    gongsirenzheng() {
      gongsirenzheng().then(response => {
        this.formData = response.data.data.info;
      });
    },
        // 获取快递列表
    getKuaidi() {
      (this.kuai_parms.page_limit = this.kuaidi_params.limit),
        (this.kuai_parms.page = this.kuaidi_params.offset),
        kuaidi(this.kuai_parms).then((res) => {
          if (res.data.code == 1) {
            this.kuaidilist = res.data.data.data.list;
            this.kuaidi_total = res.data.data.data.total;
            console.log("网络异常", res.data);
          } else {
            this.$message.error("网络异常");
          }
        });
    },
    handzheng(){
      console.log(123)
this.zhengshudialog=true
console.log(this.zhengshudialog)
    },
       handleSizeChange_kuaidi(val) {
      this.kuaidi_params.limit = val;
      this.getKuaidi();
    },
      handleCurrentChange_kuaidi(val) {
      this.kuaidi_params.offset = parseInt(val - 1) * this.kuaidi_params.limit;
      this.getKuaidi();
    },
    //个人中心
    grzxs() {
      // this.user_id = sessionStorage.getItem("user_id");
      grzx(this.user_id).then(response => {
        if (response.data.code == 1) {
          this.geren = response.data.data.detail;
        }
      });
    },
    //退出登录
    outs() {
      out(this.outlist).then(response => {
        console.log(response);
        this.outlist = response.data.data;
        sessionStorage.removeItem("token");
        this.$router.go(0);
      });
    },
    //修改密码
    modifys() {
      this.modifylist.id = sessionStorage.getItem("user_id");
      // this.modifylist.user_id = sessionStorage.getItem("user_id");
      if(this.modifylist.password==this.password_again){
         modify(this.modifylist).then(response => {
        console.log(response);
        if (response.data.code != 1) {
          this.$message.error(response.data.data.msg);
        } else {
          this.$message.success("修改成功");
        }
      });
      }else{
        this.$message.error('两次密码输入不同')
      }
     
    },
        chakan(e){
      console.log("跳转快递详情",e);
 this.$router.push({name:'Exxpress',query:{order_no:e.order_no}});
    },
    //法人章使用记录
    corporates() {
      corporate(this.user_id).then(response => {
        this.corporatelist = response.data.data.rows;
      });
    },
    //公章使用记录
    seals() {
      seal(this.user_id).then(response => {
        this.seallist = response.data.data.rows;
      });
    },
    //资质
    zizhis() {
      zizhi(this.zizhilist).then(response => {
        console.log(response);
        this.zizhilist = response.data.data.rows;
      });
    },
    //业绩
    yejis() {
      yeji(this.yeji_params).then(response => {
        console.log(response);
        if (response.data.code == 1) {
          this.yejilist = response.data.data.rows;
          this.yeji_total = response.data.data.total;
        }
      });
    },
    // 业绩 表格显示个数
    handleSizeChange(val) {
      this.params.limit = val;
      this.yejis();
    },
    // 业绩 页码
    handleCurrentChange(val) {
      this.yeji_params.offset = parseInt(val - 1) * this.yeji_params.limit;
      this.yejis();
    },
    // 业绩搜索
    handleSearch() {
      this.yeji_params.keywords = this.yeji_search;
      this.yejis();
    },
    details(rows) {
      this.open1 = true;
      this.formData = rows;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    field132BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
    field133BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
    field135BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
    field136BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    }
  }
};
</script>
<style scoped lang="scss">
.content {
  height: 100%;
}
ul,
li {
  list-style: none;
}

.header {
  position: relative;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;
}

.header .header-left {
  position: absolute;
  left: 20px;
  top: -20px;
}

.header .header-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.header .header-right .img1 {
  position: absolute;
  right: 130px;
  top: 15px;
  width: 20px;
  text-align: center;
  height: 20px;
}

.header .header-right .img2 {
  position: absolute;
  right: 70px;
  top: 13px;
  width: 20px;
  height: 20px;
  border: none;
}

.header .header-right .img2 .img3 {
  position: absolute;
  left: 10px;
  bottom: 2px;
  width: 20px;
  height: 20px;
}
.personal_box {
  width: 100%;
  display: flex;
  justify-content: center;
  .box_personal_content {
    width: 70%;
    margin-top: 77px;
  }
}
.Personal {
  width: 40%;
}

::v-deep .Personal .el-input__inner {
  width: 100%;
  border: 0;
  border-bottom: #ccc 1px solid;
  border-radius: 0;
  padding: 0;
}
::v-deep.el-input.is-disabled .el-input__inner {
-webkit-appearance: none;
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
}
// 搜索框
.search {
  float: right;
  width: 15%;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  display: flex;
  ::v-deep .el-input__inner {
    border: none;
  }
  ::v-deep .el-button {
    border: none;
  }
}
.update_password {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 77px;
  .update{
    width: 30%;
  }
  
}
::v-deep.el-form--inline .el-form-item{
  width: 100%;
}
::v-deep.el-form--inline .el-form-item__content{
  width: 100%;
}
.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
.password li:nth-of-type(4) button {
  background-color: #1795ff;
  width: 200px;
  height: 40px;
  border: none;
}
.el-tabs--left {
  min-height: calc(100% - 60px);
}
::v-deep.el-tabs--left .el-tabs__item.is-left {
  width: 200px;
  height: 50px;
  line-height: 50px;
  // text-align: center;
  font-size: 18px;
  font-family: MicrosoftYaHei-, MicrosoftYaHei;
  font-weight: normal;
  color: #000000;
}
::v-deep.el-tabs--left .el-tabs__item.is-active {
  background: #1795ff;
  color: #fff;
}
</style>
